<template>
	<u-popup :show="isShow" closeIconPos @close="isShow = false" bgColor="rgba(0,0,0,0)" :safeAreaInsetBottom="false" round="20rpx">
		<view class="position-relative wrapper rounded-radius-l  bg-white overflow-hidden">
			<view class="position-absolute top-0 left-0 w_100 h_100 bg-white" style="filter: blur(20px);"></view>
			<view class="position-absolute top-0 left-0 flex flex-column align-stretch w_100 h_100">
				<view class="w_100 flex mb-4 align-center justify-between title_box border-box">
					<view style="width: 80rpx;" class="flex align-center justify-start">
						<!-- <text class="close_text font-md-g font-weight-heavy">取消</text> -->
					</view>
					<!-- <view class="">
						<text class="font-md-l font-weight-heavy">筛选组讯</text>
					</view> -->
					<view style="width: 80rpx;" class="flex justify-end">
						<image @click="isShow = false" src="/static/close.svg" class="rounded-circle" style="height: 60rpx; width: 60rpx" mode=""></image>
					</view>
				</view>
				
				<view class="flex flex-column align-center justify-between py-4 border-box flex-1">
					<view class="flex flex-column align-center">
						<u-icon name="/static/wechat_avatar.svg" size="190rpx"></u-icon>
						<text class=" mt-2 code_text">识码添加客服</text>
						<text class="font-weight-normal font-md-g">好友备注入群</text>
					</view>
					
					<image src="../static/code.png" show-menu-by-longpress style="height: 332rpx; width: 326rpx;" mode=""></image>
					
					<view @click="isShow = false" class="btn_wrapper flex align-center justify-center rounded-radius-l" style="margin-bottom: 100rpx;">
						<text class="text-white font-md-g">关闭</text>
					</view>
				</view>
			
			</view>
			
		</view>
	</u-popup>
</template>

<script setup>
	import { ref, watch } from 'vue'
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		},
		act: {
			type: String,
			default: '全国'
		}
	})
	const isShow = ref(false)
	const emits = defineEmits(['update:show', 'click']) // 声明emit
	const tapItem = (item) => {
		emits('click', item)
		isShow.value = false
	}
	watch(() => props.show, () => {
	   isShow.value = props.show
	})
	watch(() => isShow.value, () => {
	    emits('update:show', isShow.value)
	})
</script>

<style lang="scss" scoped>
	.wrapper {
		height: 84vh;
		.title_box {
			height: 100rpx;
			padding: 0 24rpx;
			.close_text {
				color: rgba(63, 81, 140, 1);
			}
		}
		.scroll_box {
			height: calc(100% - 50rpx);
		}
		.code_text {
			margin-bottom: 32rpx;
			font-size: 68rpx;
			font-weight: 700;
		}
		.btn_wrapper {
			height: 100rpx;
			width: 654rpx;
			background-color: rgba(63, 81, 140, 1);
		}
	}
</style>